import React from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  processColor
} from 'react-native';

import {PieChart} from 'react-native-charts-wrapper';

class PieChartScreen extends React.Component {

  constructor() {
    super();

    this.state = {
      pieLegend: {
        enabled: false,
        textSize: 8,
        form: 'CIRCLE',
        position: 'RIGHT_OF_CHART',
        wordWrapEnabled: true
      },
      pieData: {
        dataSets: [{
          values: [
            {value: 865.68, label: 'nengliang'},
            {value: 280, label: 'shui'},
            {value: 420, label: 'dian'},
            {value: 300, label: 'qi'}],
          label: '',
          config: {
            colors: [processColor('#F29400'), processColor('#0268AE'), processColor('#FFD500'), processColor('#DF4443')],
            valueTextSize: 16,
            valueTextColor: processColor('white'),
            sliceSpace: 0,
            selectionShift: 10
          }
        }],
      },
      pieDescription: {
        text: '',
        textSize: 15,
        textColor: processColor('darkgray'),
      }
    };
  }

  handleSelect(event) {
    let entry = event.nativeEvent;
    if (entry == null) {
      this.setState({...this.state, selectedEntry: null})
    } else {
      this.setState({...this.state, selectedEntry: JSON.stringify(entry)})
    }
  }

  render() {
    return (

      <View style={{flex: 1}}>

        <View style={{height:80}}>
          <Text> selected entry</Text>
          <Text> {this.state.selectedEntry}</Text>
        </View>

        <View style={styles.container}>
          <PieChart
            style={styles.chart}
            animation={{durationX: 2000, durationY: 2000}}
            logEnabled={true}
            chartBackgroundColor={processColor('white')}
            chartDescription={this.state.pieDescription}
            data={this.state.pieData}
            legend={this.state.pieLegend}
            drawEntryLabels = {false}
            entryLabelColor = {processColor('black')}
            entryLabelTextSize = {20}
            rotationEnabled={true}
            drawSliceText={true}
            usePercentValues={false}
            holeRadius={0}
            holeColor={processColor('red')}
            transparentCircleRadius={0}
            transparentCircleColor={processColor('#f0f0f088')}
            maxAngle={360}
            onSelect={this.handleSelect.bind(this)}
          />
        </View>

      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  chart: {
      width: 200,
      height: 200,
  }
});

export default PieChartScreen;
